<template>
  <div>
    <!-- 列表------------- -->
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column label="序号"
                       width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name"
                       label="设备编号"
                       width="120">
      </el-table-column>

      <el-table-column prop="address"
                       label="设备型号"
                       width="240"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="partners"
                       label="详细地址"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="state"
                       label="运营状态"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="state"
                       label="设备状态"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="operate"
                       label="操作"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="sp11"
                @click="outerVisibleCarouselFn(scope.$index, scope.row)">查看详情</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表------------- -->

    <div class="block">
      <el-pagination prev-text="上一页"
                     next-text="下一页"
                     @prev-click="handleSizeChange"
                     @next-click="handleCurrentChange"
                     :current-page.sync="currentPage1"
                     :page-size="10"
                     layout="slot,next,prev"
                     :total="Number(num)">
        <span class="sp1">共{{ FixingStateTotal.totalCount }}条数据 第{{FixingStateTotal.pageIndex  }}/{{  FixingStateTotal.totalPage }}页</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      Fmdatasj: [],
      currentPage1: 10,
      loading: false,
      num: ''
    }
  },
  methods: {
    handleSelectionChange (val) {
      console.log(val)
    },
    outerVisibleCarouselFn (index, rouw) {
      console.log(rouw)
    },
    handleSizeChange (val) {
      // 上一页
      console.log(val)
    },
    handleCurrentChange (val) {
      // 下一页
      console.log(val)
    }
  },
  computed: {
    ...mapState('fixingState', ['FixingStateTotal', 'TableList'])
  },
  created () {
    this.$store.dispatch('fixingState/getFixingStateLsit', 1)
  }
}
</script>

<style lang="less" scoped>
.sp1 {
  font-size: 14px !important;
  color: #dbdfe5 !important;
}
.sp11 {
  color: #5f84ff;
  margin-left: 8px;
  cursor: pointer;
}
::v-deep {
  .el-pagination .btn-prev {
    float: right;
    background-color: #d5ddf8 !important;
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
  }
  .el-pagination .btn-next {
    float: right;
    background-color: #d5ddf8 !important;
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
  }
  .el-pagination{
    margin-top: 10px;
    padding: 10px;
  }
}
</style>
